<template>
  <div>
    <main class="main">
      <div class="callBack">
        <div></div>
      </div>
      <div class="subject">
        <div class="navLeft">
          <div class="centerBox">
            <currentHeader :headerTitle="'智能开关'"></currentHeader>
            <div class="centerList">
              <div class="listContent"
                   v-for="(item, index) in switchOnlyList"
                   :key="index">
                <div class="line"></div>
                <div class="rightDetails">
                  <div class="contentImg">
                    <img src="../../assets/img/lightUp/numberSwitches"
                         alt="" />
                  </div>
                  <div class="contentText">
                    <span class="contentTitle">{{ item.name+'(个)'}}</span>
                    <span class="contentNumber">{{ item.num }}</span>
                  </div>
                  <div class="contentText">
                    <span class="online">在线(个)</span>
                    <span class="onlineNum">{{ item.online.split(",").length }}</span>
                  </div>
                  <div class="contentText">
                    <span class="offLine">离线(个)</span>
                    <span class="offLineNum">{{ offLineNumber[`otherCount${index}`] }}</span>
                  </div>
                </div>
              </div>
              <div class="chart">
                <div class="pieBgk"></div>
                <div class="pie">
                  <Pie :pieNum="pieNum"
                       ref="pie"></Pie>
                </div>
                <div class="chartMessage">
                  <div class="onLineBox">
                    <img src="../../assets/img/lightUp/lightUpThree.png"
                         alt=""
                         class="onLineIcon" />
                    <span class="onLineText">在线</span>
                  </div>
                  <div class="offLineBox">
                    <img src="../../assets/img/lightUp/commonOne.png"
                         alt=""
                         class="offLineIcon" />
                    <span class="offLineText">离线</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="centerFooter">
            <currentHeader :headerTitle="'远程开关'"></currentHeader>
            <div class="select">
              <div class="selectText">选择范围</div>
            </div>
            <p class="selectedRange">已选范围:</p>
            <div class="codingList">
              <div class="codingBox">TSG-2ATG-Z1</div>
              <div class="codingBox">TSG-2ATG-Z1</div>
            </div>
            <div class="codingList">
              <div class="codingBox">TSG-2ATG-Z1</div>
              <div class="codingBox">TSG-2ATG-Z1</div>
            </div>
            <div class="codingList">
              <div class="codingBox">TSG-2ATG-Z1</div>
              <div class="codingBox">TSG-2ATG-Z1</div>
            </div>
            <div class="codingList">
              <div class="codingBox">TSG-2ATG-Z1</div>
              <div class="codingBox">TSG-2ATG-Z1</div>
            </div>
            <div class="codingList">
              <div class="codingBox">TSG-2ATG-Z1</div>
              <div class="codingBox">TSG-2ATG-Z1</div>
            </div>
            <div class="bottomSwitch">
              <div class="open">
                <div>远程开启</div>
              </div>
              <div class="close">
                <div>远程关闭</div>
              </div>
            </div>
          </div>
        </div>
        <div class="navRight"></div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts" name="lightUp">
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import {
  getOffline,
  getSwitchOnly,
} from '../../api/modules/LightingRequest/light'
import currentHeader from '../../components/CurrentHeader.vue'
import Pie from '../../components/pie.vue'
const route = useRoute()

/* 智能开关部分 */
const switchOnlyList = ref<Array<any>>([]) // 智能开关列表数据
const offLineNumber = ref<Object>({}) // 离线数量
const pie = ref() // 获取饼图实例
const pieNum = ref({
  // 饼图 在离线数量
  pieOnline: 0,
  pieOffline: 0,
})
const getSwitchOnlyList = async () => {
  // 智能开关 列表请求
  const entityCode = route.params.entityCode || ''
  const entityType = route.params.entityType || ''
  const equipTypeCodes = route.params.equipTypeCodes || ''
  const res = await getSwitchOnly({
    entityCode,
    entityType,
    equipTypeCodes,
  })
  if (res.data.code === '0') {
    console.log(res.data.data.data)
    res.data.data.data.forEach((el: any) => {
      pieNum.value.pieOnline += el.online.split(',').length
    })
    let onlineList = ''
    switchOnlyList.value.forEach((element: any) => {
      onlineList += element.online + ','
    })
    getOfflineNum(onlineList, 'online')
  }
}
const getOfflineNum = async (tagnames: any, startSign: string) => {
  // 获取离线个数 请求
  const res = await getOffline({
    tagnames: JSON.stringify(tagnames),
    startSign: JSON.stringify(startSign),
  })
  if (res.data.code === '0') {
    offLineNumber.value = res.data.data

    for (let key in res.data.data) {
      // 获取饼图离线总数
      pieNum.value.pieOffline += res.data.data[key]
    }
    pie.value.open() // 生成饼图
  }
}
onMounted(() => {
  getSwitchOnlyList()
})
</script>
<style lang="less" scoped>
@import './lightUp.less';
</style>
